<!--
 label：父级提示信息
 show：父级项是否展示
 checkboxStatus：复选框是否展示
 checked：复选框是否全选
 initBackgroundColor：父级初始化背景色
 selectedBackgroundColor：父级选中颜色
 tipDerection：父级信息提示方向和弹窗方向
 effect：弹窗展示模式（dark/light）
 icon：父级图标
 children：弹窗展示列表
 children.checked：子级是否选中
 children.label：子级项名字
 children.icon：子级项图标
 children.show：子级项是否显示
 slotName:插槽名称

 测试数据如下：---------------------------------------------
 legendList: [
        {
          id: 1,
          label: '父级1',
          show: true,
          checkboxStatus: true,
          checked: false,
          initBackgroundColor: '#3fceb2',
          selectedBackgroundColor: '#1c67a4',
          tipDerection: 'right',
          effect: 'dark',
          icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
          children: [
            {
              id: 11,
              label: '子级1',
              icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
              show: true,
              checked: false,
            },
            {
              id: 12,
              label: '子级2',
              icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
              show: true,
              checked: false,
            },
          ],
        },
        {
          id: 2,
          label: '父级2',
          show: true,
          checkboxStatus: false,
          checked: false,
          tipDerection: 'right',
          initBackgroundColor: '#3fceb2',
          selectedBackgroundColor: '#1c67a4',
          effect: 'dark',
          icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
          children: [
            {
              id: 21,
              label: '子级1',
              icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
              show: true,
              checked: false,
            },
            {
              id: 22,
              label: '子级2',
              icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
              show: true,
              checked: false,
            },
          ],
        },
        {
          id: 3,
          label: '父级3',
          slotName: 'test',
          tipDerection: 'right',
          show: true,
          initBackgroundColor: '#3fceb2',
          selectedBackgroundColor: '#1c67a4',
          icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663396144&t=7cf0c0b402c0ce9ddbf225e624381b26',
        },
      ],
-->
<template>
  <div class="container">
    <div class="legendListContainer">
      <template v-for="(item,index) in value">
        <div :key="item.id"
             class="li"
             v-if="item.show"
             @click="selectParentItem(index)"
             @keydown="()=>{}"
             :style="{
               backgroundColor:(selectedIndex === index && selectStatus)?
               item.selectedBackgroundColor:
               item.initBackgroundColor
             }">
          <el-tooltip class="item"
                      :effect="item.effect"
                      :content="item.label"
                      :placement="item.tipDerection">
            <el-popover
              :placement="item.tipDerection"
              popper-class="popperClass"
              @hide="handleHide"
              :value="(selectedIndex === index && visible)"
              trigger="manual">
              <div class="childrenContainer">
                <div class="close" @click="close" @keydown="()=>{}">×</div>
                <template v-if="!item.slotName">
                  <div class="childrenTitle">
                    <el-checkbox v-model="item.checked"
                                 @change="changeCheck"
                                 v-if="item.checkboxStatus">
                      {{item.label}}
                    </el-checkbox>
                    <div v-if="!item.checkboxStatus">{{item.label}}</div>
                  </div>
                  <div>
                    <template v-for="(childItem,childIndex) in item.children">
                      <div :key="childItem.id" v-if="childItem.show">
                        <img class="childIcon"
                             :src="childItem.icon"
                             alt="加载失败"
                             v-if="childItem.icon">
                        <span class="childLabel"
                              :class="{active:item.checked ? item.checked : childItem.checked }"
                              @keydown="()=>{}"
                              @click="selectChildItem(index,childIndex)">
                    {{childItem.label}}
                  </span>
                      </div>
                    </template>
                  </div>
                </template>
                <slot :name="item.slotName" v-if="item.slotName"></slot>
              </div>
              <div slot="reference"
                   @keydown="()=>{}">
                <img :src="item.icon" alt="加载失败">
              </div>
            </el-popover>
          </el-tooltip>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'legendList',

  props: {
    value: {
      type: [Array],
      required: true,
    },
  },
  data() {
    return {
      selectedIndex: null,
      checked: false,
      originData: null,
      selectStatus: false,
      visible: false,
    };
  },
  created() {
    const legendList = JSON.parse(JSON.stringify(this.value));
    this.originData = legendList;
  },
  methods: {
    selectParentItem(index) {
      if (this.selectedIndex === index) {
        this.selectStatus = !this.selectStatus;
      } else {
        this.selectStatus = true;
      }
      this.selectedIndex = index;
      this.reference(this.selectStatus);
    },
    selectChildItem(parentIndex, childIndex) {
      const legendList = JSON.parse(JSON.stringify(this.value));
      const childItem = legendList[parentIndex].children[childIndex];
      childItem.checked = !childItem.checked;
      const status = legendList[parentIndex].children.every((item) => item.checked === true);
      legendList[parentIndex].checked = status;
      this.$emit('input', legendList);
    },
    changeCheck(val) {
      const legendList = JSON.parse(JSON.stringify(this.value));
      const { children } = legendList[this.selectedIndex];
      legendList[this.selectedIndex].checked = val;
      children.forEach((item, index) => {
        children[index].checked = val;
      });
      this.$emit('input', legendList);
    },
    handleHide() {
      this.originData.forEach((item, index) => {
        this.originData[index].checked = false;
      });
      this.$emit('input', this.originData);
    },
    reference(status) {
      this.visible = status;
    },
    close() {
      this.visible = false;
      this.selectedIndex = null;
    },
  },
};
</script>

<style scoped lang="scss">

.legendListContainer {
  .li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    text-align: center;
    cursor: pointer;

    img {
      width: 50%;
      height: 50%;
      vertical-align: middle;
    }

  }
}

.popperClass {
  width: 100%;
  height: 100%;
}
.childrenContainer{
  .close{
    text-align: right;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
    color: red;
  }
  .childIcon{
    width:10px;
    height: 10px;
  }
  .active{
    color: red;
  }
  .childLabel{
    cursor: pointer;
  }
}
</style>
